<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container">
    <!-- 注册的盒子 -->
    <div class="reg-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域(表单信息) -->
    <el-form :model="formData" :rules="formDataRules" ref="formDataRef">
        <!--第一行,用户名信息-->
        <el-form-item prop="username">   
            <el-input type="text" prefix-icon="el-icon-user" placeholder="请输入你的用户名"
            v-model="formData.username"></el-input>
        </el-form-item>
         <!--第二行,密码信息-->
        <el-form-item prop="password">
            <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入你的密码"
             v-model="formData.password"></el-input>
        </el-form-item>
         <!--第三行,确认密码信息-->
        <el-form-item prop="repassword">
            <el-input type="password" prefix-icon="el-icon-lock" placeholder="请再次输入你的密码"
             v-model="formData.repassword" @keydown.enter.native="doRegister"></el-input>
        </el-form-item>
         <!--第四行,注册信息按钮-->
         <el-button type="success" style="width : 100%" @click="doRegister">注册</el-button>
         <!--第五行,文字连接-->
           <el-link href="#/login">去登录</el-link>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  // data数据
  data() {
    return {
        formData : {
            username : "",
            password : "",
            repassword : "",
        },
        // 定义表单数据规则
        formDataRules : {
            username : [
                {required: true, message: '用户名不能为空', trigger: 'blur' },
                {pattern: /^[a-zA-Z0-9]{1,10}$/,message: "用户名必须是1-10位的字母数字",trigger: "blur"},
            ],
            password : [
                {required: true, message: '密码不能为空', trigger: 'blur' },
                {pattern: /^\S{6,15}$/,message: "密码必须是6-15位的非空字符",trigger: "blur"},
            ],
            repassword : [
                {required: true, message: '密码不能为空', trigger: 'blur' },
                {pattern: /^\S{6,15}$/,message: "密码必须是6-15位的非空字符",trigger: "blur"},
                {validator:(rule, value, callback)=> {
                    if(value != this.formData.password) {
                         callback(new Error("两次密码不一致！"));
                    } else {
                        callback()
                    }
                },trigger: "blur"}
            ]
        }
    }
  },
  methods: {
    doRegister() {
        this.$refs.formDataRef.validate(async valid => {
            console.log(valid)
            if(valid) {
                const {data : res} = await this.$axios.post("/api/reg", this.formData)
                console.log(res)
                if(res.code !== 0) {
                    // 失败了
            this.$message.error(res.message);
                } else {
                     this.$message.success(res.message);
                     this.$router.push("/login")
                }
            }
    })
  },
}
}
</script>

<style lang="less" scoped>
.reg-container {
  background: url("@/assets/images/login_bg.jpg") center;
  background-size: cover;
  height: 100%;

  .reg-box {
    width: 400px;
    height: 335px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .title-box {
      height: 60px;
      background: url("@/assets/images/login_title.png") center no-repeat;
    }
  }

  .el-form {
    padding: 0 25px;
  }

  .btn-reg {
    width: 100%;
  }
}
</style>